<!DOCTYPE html>
<html lang="en">
<head>
    <!--
      @author 赵国杰
      @Description: 人均居民最终消费支出
    -->
    <meta charset="UTF-8">
    <title>人均居民最终消费支出</title>
    <!-- 引入Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- 引入BootStrap-table -->
    <link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
    <script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

    <!-- 引入Bootstrap-paginator -->
    <script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

    <!-- 引入Echarts -->
    <script src="../assets/libs/echarts/echarts.min.js"></script>
    <style>
        .th-inner{
            text-align: center;
        }
    </style>

</head>
<body>
    <div class="container">
        <div>
            <ul class="nav nav-tabs">
                <li role="presentation" id="tableTag"><a href="javascript:;" onclick="showTable()">&nbsp;<span class="glyphicon glyphicon-th-large"></span>&nbsp;</a></li>
                <li role="presentation" id="imageTag"><a href="javascript:;" onclick="showImage()">&nbsp;<span class="glyphicon glyphicon-tasks"></span>&nbsp;</a></li>
            </ul>
        </div>

        <div id="tableView">
            <div class="page-header" style="text-align: center;">
                <h3>人均居民最终消费支出</h3>
                <br>
                <h4 style="margin-top: -20px;">Household Final Consumption Expenditure per capita</h4>
            </div>
            <div style="text-align: right;">单位:&nbsp;美元</div>

            <table id="tableData"style="text-align: center"></table>
        </div>

        <div id="imageView">
            <div class="page-header" style="text-align: center;">
                <h3>人均居民最终消费支出柱状图</h3>
                <br>
                <h4 style="margin-top: -20px;">Household Final Consumption Expenditure per capita</h4>
            </div>

            <div class="panel" style="margin-top: 1.5em;">
                <!--<div style="text-align: right;">单位:&nbsp;元</div>-->
                <div id="main" style="width: 100%;height:400px;"></div>
            </div>
        </div>

        <div style="color: #959595; margin-top: 1.5em;">*此数据仅展现最近五年，若需全部数据请点击&nbsp;<a href="#" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-save"></span> 下载
        </a></div>


        <!-- <div style="text-align: right;"><div id="page"></div></div> -->
    </div>
    <script>
        $(function(){
            $('#imageView').hide();
            $('#tableTag').attr('class','active');
        })

        function showTable() {
            $('#tableView').show();
            $('#imageView').hide();
            $('#tableTag').attr('class','active');
            $('#imageTag').removeClass('active');
        }

        function showImage() {
            $('#imageView').show();
            $('#tableView').hide();
            $('#imageTag').attr('class','active');
            $('#tableTag').removeClass('active');
        }

        $('#tableData').bootstrapTable({
            striped: true,
            columns: [
                {
                    field: 'country',
                    title: '国家或地区'
                },
                {
                    field: 'year1',
                    title: '2005年'
                },
                {
                    field: 'year2',
                    title: '2010年'
                },
                {
                    field: 'year3',
                    title: '2015年'
                },
            ],
            data: [
                {
                    country:"阿尔巴尼亚",
                    year1:"2348.859511",
                    year2:"3183.902436",
                    year3:"3417.112966",
                },
                {
                    country:"爱沙尼亚",
                    year1:"7720.467745",
                    year2:"7648.540949",
                    year3:"9454.535088",
                },
                {
                    country:"波黑",
                    year1:"",
                    year2:"3759.572222",
                    year3:"3827.973709",
                },
                {
                    country:"保加利亚",
                    year1:"3408.239692",
                    year2:"4320.856158",
                    year3:"4741.547967",
                },
                {
                    country:"波兰",
                    year1:"6164.074196",
                    year2:"7759.633955",
                    year3:"8540.640373",
                },
                {
                    country:"黑山",
                    year1:"",
                    year2:"5467.988476",
                    year3:"5554.18673",
                },
                {
                    country:"捷克",
                    year1:"8946.441562",
                    year2:"9733.296682",
                    year3:"10028.98879",
                },
                {
                    country:"克罗地亚",
                    year1:"7808.437201",
                    year2:"7962.937421",
                    year3:"8000.851172",
                },
                {
                    country:"罗马尼亚",
                    year1:"3996.961707",
                    year2:"5262.511326",
                    year3:"6083.273883",
                },
                {
                    country:"立陶宛",
                    year1:"7033.395959",
                    year2:"7676.157963",
                    year3:"9534.883804",
                },
                {
                    country:"拉脱维亚",
                    year1:"6458.87396",
                    year2:"7208.794338",
                    year3:"8656.093033",
                },
                {
                    country:"马其顿",
                    year1:"2963.882775",
                    year2:"3445.624098",
                    year3:"3514.661189",
                },
                {
                    country:"塞尔维亚",
                    year1:"3462.56733",
                    year2:"4223.255435",
                    year3:"4186.303251",
                },
                {
                    country:"斯洛伐克",
                    year1:"7982.729493",
                    year2:"9604.576766",
                    year3:"9822.039212",
                },
                {
                    country:"斯洛文尼亚",
                    year1:"11941.06401",
                    year2:"13135.55346",
                    year3:"12482.60078",
                },
                {
                    country:"匈牙利",
                    year1:"7347.548017",
                    year2:"6800.914915",
                    year3:"6939.495669",
                },
            ]
        });

        var all = {
            "data": [
                ['2348.859511', '7720.467745', '', '3408.239692', '6164.074196', '', '8946.441562', '7808.437201', '3996.961707', '7033.395959', '6458.87396', '2963.882775', '3462.56733', '7982.729493', '11941.06401', '7347.548017'],
                ['3183.902436', '7648.540949', '3759.572222', '4320.856158', '7759.633955', '5467.988476', '9733.296682', '7962.937421', '5262.511326', '7676.157963', '7208.794338', '3445.624098', '4223.255435', '9604.576766', '13135.55346', '6800.914915'],
                ['3417.112966', '9454.535088', '3827.973709', '4741.547967', '8540.640373', '5554.18673', '10028.98879', '8000.851172', '6083.273883', '9534.883804', '8656.093033', '3514.661189', '4186.303251', '9822.039212', '12482.60078', '6939.495669'],
            ],
            "countrys": ["阿尔巴尼亚","爱沙尼亚","波黑","保加利亚","波兰","黑山","捷克","克罗地亚","罗马尼亚","立陶宛","拉脱维亚","马其顿","塞尔维亚","斯洛伐克","斯洛文尼亚","匈牙利"],
            "years": ["2005年", "2010年", "2015年"]
        };

        var option = {
            timeline: {
                axisType: 'category',
                autoPlay: true,
                playInterval: 2000,
                data: all.years
            },
            options: [{
                tooltip: {
                    trigger: 'axis'
                },
                title:{
                    subtext:'数据来源'
                },
                calculable: true,
                grid: {
                    y: 100,
                    y2: 100
                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        interval: 0
                    },
                    data: all.countrys
                }],
                yAxis: [{
                    type: 'value',
                    name: '美元'
                }],
                series: [{
                    name: '银行资本充足率',
                    type: 'bar',
                    data: all.data[0]
                }]
            },
                {
                    series: [{
                        data: all.data[1]
                    }]
                },
                {
                    series: [{
                        data: all.data[2]
                    }]
                },
                {
                    series: [{
                        data: all.data[3]
                    }]
                },
                {
                    series: [{
                        data: all.data[4]
                    }]
                },
                {
                    series: [{
                        data: all.data[5]
                    }]
                },
                {
                    series: [{
                        data: all.data[6]
                    }]
                },
                {
                    series: [{
                        data: all.data[7]
                    }]
                },
                {
                    series: [{
                        data: all.data[8]
                    }]
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>